<template>
  <div class="c_page">
    <div class="car_head">
          <div class="layoutBox" style='width:120px;vertical-align: top;margin-top:7.5px;margin-right:30px'>
              <el-date-picker
                v-model="year"
                type="year"
                 value-format='yyyy'
                @change="yearChange"
                placeholder="选择年">
              </el-date-picker>
          </div>
          <div class="layoutBox">
                <ul class="m_ul clearfix">
                  <li v-for="(item,key) in monthArr" :key="key" :class="mounthIndex==key?'currentLi':''" @click="monthChange(item,key)">{{item}}月</li>
                </ul>
          </div>
          <div class="layoutBox" style="float:right;margin-top:12.5px;">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="我的"></el-checkbox>
                  <el-checkbox label="我关注的"></el-checkbox>
                  <el-checkbox label="我下属的"></el-checkbox>
                </el-checkbox-group>
          </div>
    </div>
    <div class="car_content">
       
          <calend :carDate='carDate'>
             <template slot-scope="item">
               <div class="task_num">
                   1
               </div>
             </template>
          </calend>
       
       
    </div>
    <div class="car_foot clearfix">
          <ul>
            <li>已完成任务</li>
            <li>2019年4月共完成任务 <span>3</span>件</li>
          </ul>
    </div>
  </div>
</template>

<script>
import calend from '../../components/calend'
export default {
  name: '',
  data(){
      return{
        carDate:'2019/04/26',
        monthArr:[1,2,3,4,5,6,7,8,9,10,11,12],
        year:'',
        mounthIndex:0,
        month:1,
        checkList:[],
      }
  },
  created(){
      this.year=String(new Date().getFullYear());
   
  },
  methods:{
    monthChange(item,key){
        this.mounthIndex=key;
        this.month=item;
        this.getDate();
       
    },
    yearChange(){
        this.getDate();
       
    },
    getDate(){

        if(this.month<10){
           this.carDate=this.year + '/0'+this.month+'/01';
        }else{
           this.carDate=this.year + '/'+this.month+'/01';
        };
         
    },
  },
  components:{
    calend
  }
}
</script>

<style scoped lang='less'>
.c_page{
  border: 1px solid #c9d8ea;
  background: #fff;
  height: 100%;
}
.car_head{
  height: 45px;
  border-bottom: 1px solid #c9d8ea;
 
  padding:0 17px;
  .m_ul{
    li{
      float: left;
      height: 45px;
      line-height: 45px;
      margin: 0 15px;
      cursor: pointer;
    }
    .currentLi{
      color: #166bce;
      border-bottom: 2px solid #166bce;
    }
  }
}
.car_content{
  height: calc(100% - 90px);
  padding: 6px;
}
.car_foot{
  ul{
    li{
      width:50%;
      float: left;
      height: 45px;
      padding: 0 15px;
      line-height: 45px;
      &:first-child{
        padding-left: 32px;
        position: relative;
        &:before{
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: absolute;
          left: 15px;
          top:18.5px;
          background: #36C25E;
        }


      };
      &:last-child{
        text-align: right;
        >span{
          color: #166bce;
          font-weight: 700;
        }
      }
    }
  }
}
.task_num{
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  line-height: 21px;
  color: #fff;
  background: #36C25E;
  text-align: center;
}
</style>
